<template>
	<view class="">
		<view class="flex-justify-center menu-box ">
			<view class="menu-content flex-align-center">
				<view @click="onChangeType(1)"
					:class="['title-item',data.type==1?'title-item-active':'','flex-center-r']">
					<text>个人</text>
					<view :class="['bottom-line',data.type==1?'bottom-line-active':'']"></view>
				</view>
				<view @click="onChangeType(2)"
					:class="['title-item',data.type==2?'title-item-active':'','flex-center-r']">
					<text>团队</text>
					<view :class="['bottom-line',data.type==2?'bottom-line-active':'']"></view>
				</view>

			</view>
		</view>
		<view class="content">
			<!-- 个人 -->
			<view class="personage flex-justify-s" v-if="data.type==1">
				<view class="info" >
					<view class="name" v-show="Object.keys(data.info).length > 0">{{data.info.name}}（{{data.info.telephone}}）</view>
					<view class="sfz">{{data.info.licenseNum}}</view>
				</view>
				<view class="flex-align-center" @click="switchParticipationInfo(1)">
					<text class="csz">切换参赛者</text>
					<uv-icon name="arrow-right" size="12" color="#3C66F6"></uv-icon>
				</view>
			</view>
			<!-- 团队 -->
			<view class="personage flex-justify-s" v-if="data.type==2">
				<view class="info">
					<view class="name">{{data.info.teamName}}</view>
					<view class="sfz">
						<text v-for="(item,index) in data.info.userName">{{item}}</text>
					</view>
				</view>
				<view class="flex-align-center" @click="switchParticipationInfo(2)">
					<text class="csz">切换团队</text>
					<uv-icon name="arrow-right" size="12" color="#3C66F6"></uv-icon>
				</view>
			</view>
			<!-- 列表 -->
			<view class="list">
				<view class="item" v-for="(item,index) in data.list" :key="index" @click="selectItem(item)">
					<view class="forbidden" v-if="!item.ageLimit">参赛者年龄不符合</view>
					<img v-show="item.selected" src="../../../static/img/img/xuanz-icon.png" class="xuanz-icon" alt="">
					<view class="name">{{item.groupName}}
					</view>
					<view class="usrq">出生日期：{{item.birthdayStart}}~{{item.birthdayEnd}}</view>
					<view class="jg">¥{{item.price}}</view>
				</view>
			</view>
		</view>
		<view class="btn-b ">
			<view class="blue-btn" @click="payment">立即报名</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
	} from "vue";
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		applicationSelfTeam,
	} from '../../../../requestApi/api.js';
	const data = ref({
		type: 1, //1:个人 2：团队
		list: [],
		info: {},
		id: '',
		currentItem: null,

	})
	onLoad((e) => {
		data.value.id = e.id;
	});
	onShow(() => {
		getList();
	})
	/*根据出生日期算出年龄*/
	const jsGetAge = (strBirthday) => {
		
		var returnAge;
		// var strBirthdayArr = strBirthday.split("-");
		// var birthYear = strBirthdayArr[0];
		// var birthMonth = strBirthdayArr[1];
		// var birthDay = strBirthdayArr[2];

		// let d = new Date();
		returnAge=Date.parse(strBirthday);
		// var nowYear = d.getFullYear();
		// var nowMonth = d.getMonth() + 1;
		// var nowDay = d.getDate();

		// if (nowYear == birthYear) {
		// 	returnAge = 0; //同年 则为0岁
		// } else {
		// 	var ageDiff = nowYear - birthYear; //年之差
		// 	if (ageDiff > 0) {
		// 		if (nowMonth == birthMonth) {
		// 			var dayDiff = nowDay - birthDay; //日之差
		// 			if (dayDiff < 0) {
		// 				returnAge = ageDiff - 1;
		// 			} else {
		// 				returnAge = ageDiff;
		// 			}
		// 		} else {
		// 			var monthDiff = nowMonth - birthMonth; //月之差
		// 			if (monthDiff < 0) {
		// 				returnAge = ageDiff - 1;
		// 			} else {
		// 				returnAge = ageDiff;
		// 			}
		// 		}
		// 	} else {
		// 		returnAge = -1; //返回-1 表示出生日期输入错误 晚于今天
		// 	}
		// }
		return returnAge; //返回周岁年龄
	}

	//选择报名人
	const selectItem = (item) => {
		if(!item.ageLimit) return;
		data.value.list.map(value => {
			if (item.id == value.id && !item.selected) {
				value.selected = true;
				data.value.currentItem = item
			} else {
				value.selected = false;
			}
		})
	};
	//支付
	const payment = () => {
		console.log(data.value.currentItem)
		if (data.value.currentItem) {
			let item = JSON.stringify(data.value.currentItem);
			uni.navigateTo({
				url: `/pages/subpackagesSon/competition/pay/pay?id=${data.value.id}&item=${item}&type=${data.value.type}`
			})
		} else {
			uni.showToast({
				icon: 'none',
				title: '请选择报名人/团队'
			})
		}

	};
	//切换参赛信息
	const switchParticipationInfo = (type) => {
		uni.navigateTo({
			url: `/pages/subpackagesSon/competition/switchContestants/switchContestants?type=${type}&id=${data.value.id}`
		})
	};

	//获取参赛个人/团队
	const getList = () => {
		applicationSelfTeam({
			id: data.value.id,
			type: data.value.type
		}).then(res => {
			res.data.map(item =>{
				item.selected = false;
				let birthdayStart=jsGetAge(item.birthdayStart); //起始年纪
				let birthdayEnd=jsGetAge(item.birthdayEnd); //结束年纪
				if(item.entryWXResponse){  //个人
					let currentInfo=item.entryWXResponse;
					let birthdayCurrent=jsGetAge(currentInfo.birthday); //当前人年纪
					if(birthdayCurrent >= birthdayStart && birthdayCurrent <= birthdayEnd &&  (currentInfo.sex == 0  ||  currentInfo.sex==item.sexLimit.code)){
						item.ageLimit=true;
					}else{
						item.ageLimit=false;
					}
				}else if(item.teamWXResponse){ //团队
					item.teamWXResponse.entryWXResponse.map(i=>{
						
						let birthdayCurrent=jsGetAge(i.birthday); //当前人年纪
						// console.log(birthdayCurrent,birthdayStart,birthdayEnd)
						if(birthdayCurrent >= birthdayStart && birthdayCurrent <= birthdayEnd && (i.sex == 0 || i.sex==item.sexLimit.code)){
							item.ageLimit=true;
						}else{
							item.ageLimit=false;
						}
					})
					
				}
				return item;
			} );
			data.value.info = res.data.length?res.data[0].entryWXResponse || res.data[0].teamWXResponse:{};		
			data.value.list = res.data;
		})
	

	};
	//切换类型
	function onChangeType(type) {
		data.value.type = type;
		getList();
	}
</script>

<style lang="scss">
	.menu-box {
		height: 108rpx;
		padding-right: 76rpx;
		flex-direction: column;
		padding-top: 10rpx;
		background-color: #FFFFFF;
		margin-bottom: 10rpx;

		.menu-content {
			padding: 0 40rpx;
			margin-bottom: 10rpx;

			.title-item {
				font-size: 30rpx;
				color: #2C2C2C;
				margin-right: 40rpx;

				.bottom-line {
					width: 30rpx;
					height: 8rpx;
					background-color: #FFFFFF;
					border-radius: 16rpx;
					margin-top: 4rpx;
				}

				.bottom-line-active {
					background-color: #5E77F8;
				}

			}

			.title-item-active {
				font-size: 30rpx;
				color: #2C2C2C;
				font-weight: bold;
			}
		}

	}

	.content {
		padding: 0 40rpx 200rpx;

		.personage {
			width: 100%;
			height: 160rpx;
			background: rgba(233, 246, 254, 1);
			margin-bottom: 20rpx;
			padding: 0 30rpx;

			.info {
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				.name {
					font-size: 30rpx;
					font-weight: bold;
					color: #2C2C2C;
					margin-bottom: 6rpx;
				}

				.sfz {
					font-size: 24rpx;
					color: #A5A5A5;
				}
			}

			.csz {
				font-size: 30rpx;
				font-weight: bold;
				color: #3C66F6;
				margin-right: 20rpx;
			}
		}

		.list {
			.item {
				height: 180rpx;
				border: 2rpx solid #A7B8F2;
				margin-bottom: 20rpx;
				position: relative;
				padding: 20rpx 40rpx;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #2C2C2C;
					margin-bottom: 12rpx;
					line-height: 52rpx;
				}

				.usrq {
					font-size: 22rpx;
					color: #747474;
					margin-bottom: 12rpx;
					line-height: 32rpx;
				}

				.jg {
					font-size: 22rpx;
					font-weight: bold;
					color: #5E77F8;
					line-height: 32rpx;
				}

				.xuanz-icon {
					width: 52rpx;
					height: 40rpx;
					position: absolute;
					top: 0;
					right: 0;
				}

				.forbidden {
					position: absolute;
					top: 0;
					right: 0;
					left: 0;
					bottom: 0;
					background: rgba(0, 0, 0, .2);
					text-align: center;
					line-height: 180rpx;
					font-size: 40rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>